<template>
	<view style="height: 100%;background: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/bg.gif');background-size: 100% 100%;">
		<u-navbar border-bottom="false"  background="rgba(0,0,0,0)" is-fixed="true" z-index="999" title=" "></u-navbar>
		<view style="position: absolute;top: 203px;width: 240px;left: 50%;margin-left: -120px;">
			<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/shi.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/bk.png" mode="widthFix" style="width: 70px;position: fixed;z-index: 1;top:100px;right: 10px;"></image>
		<image @click="shuoming" src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/tc.png" mode="widthFix" style="width: 50px;position: fixed;z-index: 1;top:115px;right: 20px;"></image>
		<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/bk.png" mode="widthFix" style="width: 70px;position: fixed;z-index: 1;top:190px;right: 10px;"></image>
		<image  @click="wode"  src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/xin.png" mode="widthFix" style="width: 50px;position: fixed;z-index: 1;top:204px;right: 20px;"></image>
		<view style="width: 100%; text-align: center;position: fixed;z-index: 1;top: 50px;left: 0;color: #fff;">
			缔 结 名 簿  缘 定 三 生
		</view>
		<view style="width: 100%; text-align: center;position: fixed;z-index: 1;bottom: 20px;left: 0;color: #fff;">
			愿 有 情 人 终 成 眷 属
		</view>
		<!-- <image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/sanshengshibg.png"  style="width: 100%;height: 100%;position: absolute;z-index:1;top: 0;left: 0;"></image> -->
		<!-- <view  v-if="list.length>0" class="section1" :class="n1?'n1':''" style="color: #fff;text-align: center;top:234px;">
		        <view class="l1 flex" v-for="(item,index) in list[0]">
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;padding: 0 7px;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;">
							{{item.name_one}}
					</view>
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;margin-left: auto;padding: 0 7px;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;">
							{{item.name_two}}
					</view>
				</view>
		</view> -->
		 <view class="section1" :class="n1?'n1':''">
			 <view class="con">
			 	<!-- <image v-if="picmode" :src="backgroundImage"  class="back"></image>
			 	<view v-else="" :style="{'background-color':backgroundColor}" class="back"></view> -->
			 	<view class="stage" @touchstart="updateStart" @touchmove="updateMove" @touchend="updateEnd">
			 		<view class="box" :style="{transform:'rotateY('+ss+'deg)'}" :class="[vtouch&&touching?'':'slow']">
			 			<view v-for="(img,index) in images" :key="index" :style="{transform: 'rotateY('+(index*de)+'deg) translateZ('+wi+')'}">
			 				<view :class="[img.istrue?'op0':'op1']" class="imgbg flex">
			 					<view style="position:relative;">
			 						<view style="position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;font-size: 14px;">
			 							{{img.name_one}}
			 						</view>
			 						<image style="width: 20px;height: 50px;" :src="img.preview_image"  @tap="tran(index)" :class="[vertical?'hrect-image':'vrect-image']"></image>
			 					</view>
			 					<view style="position:relative;">
			 						<view style="position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;font-size: 14px;">
			 							{{img.name_two}}
			 						</view>
			 						<image style="width: 20px;height: 50px;right: 0;" :src="img.preview_image"  @tap="tran(index)" :class="[vertical?'hrect-image':'vrect-image']"></image>
			 					</view>


			 				</view>

			 				<!-- <view class="title" :style="{'background-color':backcolor,'color':fontcolor,'text-align':titleAlign,top:titleBottom?imgh:'0px'}">{{img.title}}</view> -->
			 			</view>
			 		</view>
			 	</view>
			 </view>
			<!-- <hj3-display-images :images="list[0]" :vertical="false" :vtouch="true" @itap="tap" :autoplay="true" :clockwise="true" :interval="2000" :titleBottom="true" ></hj3-display-images> -->
			<!-- <hj3-display-images :images="list[1]" :vertical="false" :vtouch="true" @itap="tap" :autoplay="true" :clockwise="true" :interval="2000" :titleBottom="true" ></hj3-display-images> -->
		 </view>
		 <!-- <view class="section1 section2"  :class="n2?'n2':''">
		 	<hj3-display-images :images="list[1]" :vertical="false" :vtouch="true" @itap="tap" :autoplay="true" :clockwise="true" :interval="2000" :titleBottom="true" ></hj3-display-images>
		 </view> -->
		 <view class="section1 section3"  :class="n3?'n3':''">
		 			 <!-- <hj3-display-images2 :images="list[2]" :vertical="false" :vtouch="true" @itap="tap" :autoplay="true" :clockwise="true" :interval="2000" :titleBottom="true" :background="back"></hj3-display-images2> -->
		 </view>
		<!-- <view v-if="list.length>1"  :class="n2?'n2':''"  class="section1 section2" style="color: #fff;text-align: center;">
		        <view class="l1 flex" v-for="(item,index) in list[1]">
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;padding: 0 7px;">
							{{item.name_one}}
					</view>
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;margin-left: auto;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;padding: 0 7px;">
							{{item.name_two}}
					</view>
				</view>
		</view> -->
		<!-- <view v-if="list.length>2"  :class="n3?'n3':''"  class="section1 section3" style="color: #fff;text-align: center;">
		        <view class="l1 flex" v-for="(item,index) in list[2]">
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;padding: 0 7px;">
							{{item.name_one}}
					</view>
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;margin-left: auto;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;padding: 0 7px;">
							{{item.name_two}}
					</view>
				</view>
		</view> -->
		<!-- <view class="section1 section3" style="color: #fff;text-align: center;">
		        <view class="l1 flex" v-for="(item,index) in 6">
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;">
							{{index}}
					</view>
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;margin-left: auto;">
							2
					</view>
				</view>
		</view> -->
		<view
			@click="all('./kedao')"
			class="f14 cfff"
			style="width: 220px; text-align: center; line-height: 40px;position: fixed; z-index: 1;bottom: 90px; left: 50%; margin-left: -110px;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/191.png'); background-size: 100% 100%;height: 40px;color: #fff;"
		>
			立即刻上，缔结良缘
		</view>
		<u-popup v-model="show" mode="center" >
			<view style="width: 300px;padding: 20px;">
				<view style="text-align: center;font-size: 20px;">
					说明
				</view>
				<view style="margin-top: 10px;">
					1.选择一种携刻方式，郑重的刻下您与心爱之人的名字
				</view>
				<view style="margin-top: 10px;">
					2.名字刻下后将展示在三生石上，天地众生共同见证，双方解除关系，所刻的名字也不会消失
				</view>
				<view style="margin-top: 10px;">
					3.但若与其他人绑定新的情侣关系，之前双方刻下的名字都会随之消失
				</view>
				<view style="margin-top: 10px;">
					4.携刻名字无次数限制，但需要一段时间，若效果未显示，关闭应用再进入即可。三生石一直在这里，见证你们的爱情
				</view>
			</view>
		</u-popup>
		<view v-if="show1" @click="show1=false" style="position: fixed;z-index: 22;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.7);"></view>
		<view v-if="show1" style="position: fixed;z-index: 33;top: 50%;left: 50%;transform:translate(-50%,-50%);">
			<view style="width: 300px;text-align: center;">
				<view class="l1 flex" style="margin: 10px auto;justify-content: center;" v-for="(item,index) in list2">
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;padding: 0 7px;margin-right: 20px;color: #fff;">
							{{item.name_one}}
					</view>
					<view style="height: 100%;width: 30px;background: rgba(0,0,0,0.5);border-radius: 6px;background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/sss/mzbg.png');background-size: 100% 100%;padding: 0 7px;color: #fff;">
							{{item.name_one}}
					</view>
				</view>
			</view>
			<view v-if="list2.length==0" style="line-height: 100px;text-align: center;">
				暂无名字，
			</view>
		</view>
		<!-- <u-popup v-model="show1" mode="center" >

		</u-popup>	 -->
	</view>
</template>

<script>
	import hj3DisplayImages from '@/components/hj3-display-images/hj3-display-images.vue';
	import hj3DisplayImages1 from '@/components/hj3-display-images/hj3-display-images1.vue';
	export default {
		components:{
		    hj3DisplayImages,
			hj3DisplayImages1
		},
		computed: {
			picmode: function() {
				return !!this.backgroundImage
			},
			de: function() {
				return 360 / this.images.length
			},
			wi: function() {
				return uni.upx2px(260) + 'px';
			},
			btm: function() {
				if (this.vertical) {
					if (this.titleBottom)
						return uni.upx2px(320) + 'px';
					return uni.upx2px(240) + 'px';
				}
				if (this.titleBottom)
					return uni.upx2px(820) + 'px';
				return uni.upx2px(740) + 'px';
			},
			bgh: function() {
				if (this.vertical) {
					if (this.titleBottom)
						return uni.upx2px(620) + 'px';
					return uni.upx2px(540) + 'px';
				}
				if (this.titleBottom)
					return uni.upx2px(1600) + 'px';
				return uni.upx2px(1520) + 'px';
			},
			imgh: function() {
				if (this.vertical) return uni.upx2px(135) + 'px';
				else return uni.upx2px(416) + 'px';
			},
			// hasTitle: function() {
			// 	return this.images.some(ele => ele.title)
			// },
			// imagesMap: function() {
			// 	if (!Array.isArray(this.images)) {
			// 		console.warn('图片输入必须是地址数组，或者是图片对象')
			// 		return []
			// 	}
			// 	var im = []
			// 	this.images.forEach((ele, index) => {
			// 		im.push({
			// 			src: ele.preview_image,
			// 			title: ele.title || '',
			// 			titleBottom: ele.titleBottom || false,
			// 			istrue:false,
			// 			name_one:ele.name_one,
			// 			name_two:ele.name_two
			// 		})
			// 		// if (typeof(ele) === 'string')
			// 		// 	im.push({
			// 		// 		preview_image: ele
			// 		// 	})
			// 		// else {
			// 		// 	let t = Object.create(null)
			// 		// 	if (!ele.preview_image) {
			// 		// 		console.warn(`第${index}个图片对象缺少src属性`)
			// 		// 	} else {

			// 		// 	}
			// 		// }
			// 	})
			// 	return im
			// }
		},
		data() {
			return {
				nums:[],
				images:[],
				current: 0,
				ss: 0,
				vertical:false,
				vtouch:true,
				start: null,
				last: null,
				touching: false,
				temp: 0,
				backgroundColor: 'rgba(0,0,0,0)',
				backgroundImage: null,
				index:0,
				list:[],
				show:false,
				n1:false,
				n2:false,
				n3:false,
				list1:[],
				show1:false,
				list2:[],
				page:1,
				img: [{src:'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg',title:"mm1"}, {src:'http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg',title:"mm2"},{src:'http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg',title:"mm2"},{src:'http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg',title:"mm2"},{src:'http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg',title:"mm2"},{src:'http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg',title:"mm2"},
				],
				current:0,
			}
		},
		onLoad() {
		},
		onShow() {
			this.names()
		},
		watch:{
			show1(e){
				if(!e){
					this.list2=[]
				}
			},
		},
		methods: {
			fanhui(){
				console.log('ggggggggggggggg')
			},
			tap:function (e) {
			    console.log(1)
			    this.current = e
			},
			async wode(){
				this.n1=true
				this.n2=true
				this.n3=true
				// create_user_id
				// for(let i in this.list1){
				// 	if(this.vuex_user.id==this.list1[i].create_user_id){
				// 		console.log(this.list1[i])
				// 		this.list2.push(this.list1[i])
				// 	}
				// }

				// this.$u.api.my_name().then((res)=>{
				// 	this.list2=res
				// })
				setTimeout(()=>{
					this.n1=false
					this.n2=false
					this.n3=false
					this.show1=true
				},2000)
				let res = await this.$u.api.my_name()
					this.list2.push(res)
			},
			shuoming(){
				this.show=true
			},
			async names(){
				let data={
					limit:90,
					page:this.page
				}
				let res= await this.$u.apis.names(data)
				if(res.length==0&&this.page>1){
					this.page=1
					this.names()
				}
				// this.list=res
				function chunk(arr, size){
				  var result = [];
				  for(var i = 0, len = arr.length; i < len; i+= size){
				    result.push(arr.slice(i, i+ size));
				  }
				  // newarr.push(result)
				  return result;
				}
				this.list1=res
				// this.list=chunk(res,3)
				let index=1
				var that=this
				that.list=chunk(that.list1,9)
				// if(){
					if(that.list.length<9){
						console.log(9-that.list.length)
						let l=9-that.list.length
						for(let i=0;i<l;i++){
							let arr={
								name_one: "未刻画",
								name_two: "未刻画"
							}
							let arr1=[]
							for(let t=0;t<9;t++){
								arr1.push(arr)
							}
							that.list.push(arr1)
						}
						for(let b=0;b<that.list.length;b++){
							if(that.list[b].length<9){
								let y=9-that.list[b].length
								let arr={
									name_one: "未刻画",
									name_two: "未刻画"
								}
								for(let n=0; n<y;n++){
									that.list[b].push(arr)
								}
							}
						}
					}
					this.images=that.list[0]
					// this.$set(this.images[0],'istrue',true)
					// this.$set(this.images[1],'istrue',true)
					// this.$set(this.images[2],'istrue',true)
					let num=this.images.length
					for(let i=0;i<num;i++){
						this.nums.push(i)
					}
					this.$set(this.images[this.nums[4]],'istrue',true)
					this.$set(this.images[this.nums[5]],'istrue',true)
					this.$set(this.images[this.nums[6]],'istrue',true)
					this.autoPlay()
				// }
				// e()
				function e(){
					if(that.list1.length<9){
						// that.page++
						// that.names()
						// for(let i=0;i<(9-that.list1.length);i++){
						// 	console.log(i)
						// 	that.list1.push(i)
						// }
					}

					// setTimeout(()=>{
						// let lis=that.list1.splice(0,9)

						console.log(that.list1,that.list,'ffffffffffff')
						// if(that.list1.length>0){
							setTimeout(()=>{
								that.list.splice(0,6)
								if(that.list.length==0){
									// setTimeout(()=>{
										that.names()
									// },5000)
									return false
								}
								console.log(that.list.length,that.list)
								if(that.list.length<6){
									let l=6-that.list.length
									for(let i=0;i<l;i++){
										let arr={
											name_one: "未刻画",
											name_two: "未刻画"
										}
										let arr1=[]
										for(let t=0;t<6;t++){
											arr1.push(arr)
										}
										that.list.push(arr1)
									}
									for(let b=0;b<that.list.length;b++){
										if(that.list[b].length<6){
											let y=3-that.list[b].length
											let arr={
												name_one: "未刻画",
												name_two: "未刻画"
											}
											for(let n=0; n<y;n++){
												that.list[b].push(arr)
											}
										}
									}
								}
								e()
							},4200)

						// }else{
							// setTimeout(()=>{
							// 	that.page++
							// 	that.names()
							// },5000)

						// }
					// },100)


				}


			},
			all(e){
				uni.navigateTo({
					url:e
				})
			},
			tran: function(index) {
				let old = this.current
				this.current = index;
				let c = (index - old) * this.de
				if (Math.abs(c) > 180) {
					if (c > 0) c = Math.abs(c) - 360
					else c = 360 - Math.abs(c)
				}
				this.ss += -c;
				this.$emit('itap', index)
			},
			updateStart: function(e) {
				if (this.vtouch) {
					this.touching = true;
					this.start = this.ss;
					this.last = e.touches[0].pageX;
				}
			},
			updateMove: function(e) {
				if (this.vtouch) {
					let np = e.touches[0].pageX;
					let tc = np - this.last;
					this.last = np;
					this.ss += tc;
				}
			},
			updateEnd: function(e) {
				if (this.vtouch) {
					this.touching = false;
					let fc = this.ss - this.start;
					let c = Math.round(fc / this.de);
					let index = (this.current - c) % 8;
					this.current = index > 0 ? index : (8 + index)
					this.ss = this.start + c * this.de;
					this.start = null;
				}
			},
			autoPlay: function() {
				console.log(this.images.length,'ggggggggggggg')

				// 	this.$set(this.images[2],'istrue',true)
				// if(this.index==1){
				// 	// this.images[0].istrue=true
				// 	// this.images[1].istrue=true
				// 	// this.images[2].istrue=true
				// 	this.$set(this.images[1],'istrue',true)
				// 	this.$set(this.images[2],'istrue',true)
				// 	// return false
				// }
				// if(this.index==2){
				// 	this.$set(this.images[0],'istrue',true)
				// 	this.$set(this.images[1],'istrue',true)
				// 	this.$set(this.images[2],'istrue',false)
				// 	this.$set(this.images[3],'istrue',false)
				// 	this.$set(this.images[4],'istrue',false)
				// 	this.$set(this.images[5],'istrue',false)
				// 	// this.images[0].istrue=true
				// 	// this.images[1].istrue=true
				// 	// this.images[2].istrue=true
				// 	// this.images[3].istrue=false

				// 	// this.images[4].istrue=false
				// 	// this.images[5].istrue=true
				// 	// return false
				// }
				// if(this.index==3){
				// 	// this.images[1].istrue=true
				// 	// this.images[2].istrue=false
				// 	// this.images[3].istrue=false

				// 	// this.images[4].istrue=false
				// 	// this.images[5].istrue=false
				// 	// this.images[0].istrue=true
				// 	this.$set(this.images[0],'istrue',true)
				// 	this.$set(this.images[1],'istrue',true)
				// 	this.$set(this.images[2],'istrue',false)
				// 	this.$set(this.images[3],'istrue',false)
				// 	this.$set(this.images[4],'istrue',false)
				// 	this.$set(this.images[5],'istrue',true)
				// 	// return false
				// }
				// if(this.index==4){
				// 	// this.images[1].istrue=true
				// 	// this.images[2].istrue=true
				// 	// this.images[3].istrue=false

				// 	// this.images[4].istrue=false
				// 	// this.images[5].istrue=false
				// 	// this.images[0].istrue=false
				// 	this.$set(this.images[0],'istrue',false)
				// 	this.$set(this.images[1],'istrue',false)
				// 	this.$set(this.images[2],'istrue',false)
				// 	this.$set(this.images[3],'istrue',false)
				// 	this.$set(this.images[4],'istrue',true)
				// 	this.$set(this.images[5],'istrue',true)
				// 	// return false
				// }
				// if(this.index==5){
				// 	this.$set(this.images[0],'istrue',false)
				// 	this.$set(this.images[1],'istrue',false)
				// 	this.$set(this.images[2],'istrue',false)
				// 	this.$set(this.images[3],'istrue',true)
				// 	this.$set(this.images[4],'istrue',true)
				// 	this.$set(this.images[5],'istrue',false)
				// 	// this.images[4].istrue=false
				// 	// this.images[5].istrue=false
				// 	// this.images[0].istrue=false
				// 	// this.images[1].istrue=false
				// 	// this.images[2].istrue=true
				// 	// this.images[3].istrue=true
				// 	// this.index=0
				// 	// return false
				// }

				// if(this.index==6){
				// 	// this.images[3].istrue=false
				// 	// this.images[4].istrue=true
				// 	// this.images[5].istrue=true
				// 	// this.images[0].istrue=false
				// 	// this.images[1].istrue=false
				// 	// this.images[2].istrue=false
				// 	this.$set(this.images[0],'istrue',false)
				// 	this.$set(this.images[1],'istrue',false)
				// 	this.$set(this.images[2],'istrue',true)
				// 	this.$set(this.images[3],'istrue',true)
				// 	this.$set(this.images[4],'istrue',false)
				// 	this.$set(this.images[5],'istrue',false)
				// 	this.index=0
				// 	// return false
				// }
				// if(this.index>=5){
				// 	for(let i in this.images){
				// 		this.images[i].istrue=false
				// 	}
				// 	this.$set(this.images[this.nums[4]],'istrue',true)
				// 	this.$set(this.images[this.nums[5]],'istrue',true)
				// 	this.$set(this.images[this.nums[6]],'istrue',true)
				// 	this.index=0
				// }
				setTimeout(() => {
					let lastnum=this.nums[this.images.length-1]
					let last=this.nums.splice(this.images.length-1,1)
					this.nums.unshift(lastnum)
					console.log(last,this.nums,'this.images.length')
					// 0,1,2,3,4,5,6,7,8
					for(let i in this.images){
						this.images[i].istrue=false
					}
					this.$set(this.images[this.nums[4]],'istrue',true)
					this.$set(this.images[this.nums[5]],'istrue',true)
					this.$set(this.images[this.nums[6]],'istrue',true)
					// this.images=this.images
					if (this.start === null) {
						if (this.clockwise)
							this.ss -= this.de;
						else
							this.ss += this.de;
					}
					this.index++
					// this.imagesMap[index+2].istrue=true
					// this.imagesMap[index+3].istrue=true
					// this.imagesMap[index+4].istrue=true
					this.autoPlay()
				},1500)
			}
		}
	}
</script>

    <style>


        page {
			height: 100%;
            /* 最后旋转的是section 也需要近大远小的效果 view也需要 所以透视放在body上 */
            perspective: 1000px;
        }

        .section1 {
			top: 155px;
			z-index: 12;
            position: absolute;
			left: 50%;
            /* width: 70px; */
            /* height:70px; */
			/* margin: auto; */
			/* left: 50%; */
			/* margin-left: -35px; */
            /* 让子元素view保持3d效果 */
            /* transform-style: preserve-3d; */
            /* animation: rotate 5s linear infinite; */
            /* background: url(images/5.jpg) no-repeat; */
        }
		.section2 {
			top: 320px;
			z-index: 12;
		    position: absolute;
			left: 50%;
		   /* width: 70px;
		    height:70px;
			margin: auto;
			left: 50%;
			margin-left: -35px;
		    /* 让子元素view保持3d效果 */
		    /* transform-style: preserve-3d;
		    animation: rotate 5s linear infinite; */
		    /* background: url(images/5.jpg) no-repeat; */
		}
		.section3 {
			top: 407px;
			z-index: 12;
		    position: absolute;
			left: 50%;
		    /* width: 70px;
		    height:70px;
			margin: auto;
			left: 50%;
			margin-left: -35px; */
		    /* 让子元素view保持3d效果 */
		    /* transform-style: preserve-3d;
		    animation: rotate 5s linear infinite; */
		    /* background: url(images/5.jpg) no-repeat; */
		}
       /* section:hover {
            animation-play-state: paused;
        } */

        @keyframes rotate {
            0% {
                /* transform: rotateY(0) */
				transform: rotateY(90deg);
            }

            100% {
                transform: rotateY(180deg);
            }

        }

        .section1 .l1 {
            /* background: #000; */
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;

            /* background: url(images/3.jpg) no-repeat; */
        }

        .section1 .l1:nth-child(6) {
            /* 第一张图片 */

            transform: rotateY(0deg) translateZ(130px);
        }

        .section1 .l1:nth-child(5) {

            /* 先旋转好位置  再移动 这里是移动Z轴 不是xy轴  所以不用严格要求把位移放在最前面 */
            transform: rotateY(60deg) translateZ(130px);
        }

        .section1 .l1:nth-child(4) {

            transform: rotateY(120deg) translateZ(130px);
        }

        .section1 .l1:nth-child(3) {

            transform: rotateY(180deg) translateZ(130px);
        }

        .section1 .l1:nth-child(2) {

            transform: rotateY(240deg) translateZ(130px);
        }

        .section1 .l1:nth-child(1) {

            transform: rotateY(300deg) translateZ(130px);
        }
		.n1{
		  animation-name: mymove;     /* // 动画名称 */
		  animation-direction: alternate;   /* // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 */
		  animation-timing-function: linear;  /*  // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束； */
		  animation-delay: 0s;    /* // 动画延迟时间 */
		  animation-iteration-count: 1;    /* //  动画播放次数，infinite：一直播放 */
		  animation-duration: 2s;   /* // 动画完成时间 */
		}
		.n2{
		  animation-name: mymove1;     /* // 动画名称 */
		  animation-direction: alternate;   /* // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 */
		  animation-timing-function: linear;  /*  // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束； */
		  animation-delay: 0s;    /* // 动画延迟时间 */
		  animation-iteration-count: 1;    /* //  动画播放次数，infinite：一直播放 */
		  animation-duration: 2s;   /* // 动画完成时间 */
		}
		.n3{
		  animation-name: mymove2;     /* // 动画名称 */
		  animation-direction: alternate;   /* // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 */
		  animation-timing-function: linear;  /*  // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束； */
		  animation-delay: 0s;    /* // 动画延迟时间 */
		  animation-iteration-count: 1;    /* //  动画播放次数，infinite：一直播放 */
		  animation-duration: 2s;   /* // 动画完成时间 */
		}
		@keyframes mymove
            {
                0%{
                transform: scale(1);  /*开始为原始大小*/
				top: 100px;
                }
                25%{
                    transform: scale(1.1); /*放大1.1倍*/
					top: 110px;
                }
                50%{
                    transform: scale(1.3);
					top: 130px;
                }
                75%{
                    transform: scale(1.5);
					top: 150px;
                }
				100%{
				    transform: scale(1);
					top: 100px;
				}

        }
		@keyframes mymove1
		    {
		        0%{
		        transform: scale(1);  /*开始为原始大小*/
		        }
		        25%{
		            transform: scale(1.1); /*放大1.1倍*/
		        }
		        50%{
		            transform: scale(1.3);
		        }
		        75%{
		            transform: scale(1.5);
		        }
				100%{
				    transform: scale(1);
				}

		}
		@keyframes mymove2
		    {
		        0%{
		        transform: scale(1);  /*开始为原始大小*/
		        }
		        25%{
		            transform: scale(1.1); /*放大1.1倍*/
		        }
		        50%{
		            transform: scale(1.3);
		        }
		        75%{
		            transform: scale(1.5);
		        }
				100%{
				    transform: scale(1);
				}

		}
    </style>
<style scoped="" lang="scss">
	.op0{
		opacity: 0;
	}
	.con {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.stage {
			display: block;
			position: absolute;
			perspective: 800upx;
			z-index: 444;
			top:60px
			// background-color: blue;
		}

		.back {
			position: absolute;
			width: 100%;
		}

		.box {
			transform-style: preserve-3d;
			position: relative;
			width: 240upx;
			// background: #f0f0f0;
			.title {
				position: absolute;
				width: 200upx;
				height: 36upx;
				font-size: 28upx;
			}

			.imgbg {
				z-index: 0;
				position: absolute;
				width: 70px;
				left: 50%;
				margin-left: -35px;
				text-align: center;
				// left: 0;

			}

			.vrect-image {
				height: 416upx;
			}

			.hrect-image {
				height: 135upx;
			}
		}

		.slow {
			transition-duration: 1s;
		}
	}
</style>
